<!DOCTYPE html>
<html lang='en'>
<head>
<title>webclient</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/layout.css" rel="stylesheet" type="text/css"></link>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript type='text/javascript' src='static/lib/jquery-3.5.1.min.js'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="static/lib/pop.js"></script>


<script type="text/javascript" src="static/lib/socket.io.js"></script>
<script type="text/javascript" src="static/lib/tdi.tabs.js"></script>
<script type="text/javascript" src="static/client.js"></script>

</head>
<body><!--onload="draw()"-->

<main id='main_content'>
<div class='wrap'>

  <div class="column middle">
    <h2 class='h2 teal'>HMI</h2>	
    <div class='content'>
      <div id="network" class="network">
	{% if local_svg %}
        <object data="static/mmi.local.svg" type="image/svg+xml" id="mmi_svg" width="100%" height="100%"></object>
	{% else %}
        <object data="static/mmi.remote.svg" type="image/svg+xml" id="mmi_svg" width="100%" height="100%"></object>
	{% endif %}
      </div>
    </div>	
  </div>

  <div class="column rightside" id="hostinfo">
    <h2 class='h2 teal'>IED</h2>	
    <div class='content'>
      <h3>datamodel</h3>
      <pre id="datamodel"></pre>
    </div>	
  </div>

	<div class="footer" id="hostlog">
		<!-- Tab Body Start -->
		<div class="tabcontents" id="hostlogbody">
			<pre id="localhost"> 
      </pre>
    </div>
		<!-- Tab Body End --> 
		<!-- Tab Headers Start -->
		<ul class="tabs" id="hostlogtab">
			<li><a data-toggle="tab" id='localhost_tab' href="#localhost">localhost</a></li>
		</ul>
		<!-- Tab Headers End --> 
	</div>

</div>
</main>
</body>
</html>

